<template>
	<cu-custom />
	<view class="register-box">
		<view class="d-flex flex-row welcome pt-5">
			<view class="d-flex flex-column">
				<view class="font-big mt-3">欢迎使用</view>
				<view class="font-lg">盘锦河蟹商家端平台</view>
			</view>
			<image :src="`${getApp.globalData.baseImgUrl}/image/home/03@2x.png`" style="width: 240rpx; height: 240rpx;" mode=""></image>
		</view>
		<view class="register-form">
			<view class="form-box">
				<view class="font-lg main-text-color text-center mb-4">用户注册</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input border-bottom" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input border-bottom" type="text" placeholder="请输入用户名" v-model="shopName" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input border-bottom" password type="text" placeholder="请输入密码" v-model="passWord" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input border-bottom" password type="text" placeholder="请再次输入密码"
						v-model="secondPassWord" />
				</view>
				<view class="uni-form-item uni-column position-relative">
					<input class="uni-input border-bottom" type="text" placeholder="请输入验证码" v-model="codeCorrect" />
					<button :disabled="verifyShow" @click.stop="getPhoneCode"
						class="getPhoneCode">{{verifyShow?`${seconds}S`:codeTitle}}</button>
				</view>
				<button @click="submit" class="main-bg-color text-white mt-5 font-md">确认</button>
				<!-- <view class="main-text-color font-md text-center mt-2">注：注册成功后，店铺名称无法修改</view> -->
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import validate from '@/utils/validate.js'
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				phoneNumber: null,
				passWord: null,
				secondPassWord: null,
				shopName: null,
				seconds: 60, //这是重新获取验证码的倒计时(可根据需求修改)
				codeCorrect: null, //正确的验证码
				verifyShow: false, //是否禁用按钮
				codeTitle: '发送验证码',
				getApp:""
			}
		},
		created() {
			this.getApp = getApp()
		},
		methods: {
			submit() {
				// 判断手机号码格式是否正确
				let phoneIstrue = validate.validatePhoneNumber(this.phoneNumber)
				if (!phoneIstrue) {
					return false
				}
				if (!this.shopName) {
					uni.showToast({
						title: "请输入用户名",
						icon: 'none'
					})
					return false
				}
				if (this.passWord.length < 6 || this.secondPassWord.length < 6) {
					uni.showToast({
						title: "密码最少是6位数",
						icon: 'none'
					})
					return false
				}
				if (this.passWord !== this.secondPassWord) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: 'none'
					})
					return false
				}
				let parms = {
					mobile_phone: this.phoneNumber,
					password: this.passWord,
					r_password: this.secondPassWord,
					username: this.shopName,
					sms_code: this.codeCorrect
				}
				interceptor.get('/supplier_applet_api.php?act=register',parms).then((res) => {
					if(res.status === 1){
						uni.showToast({
							title: res.msg,
							icon: 'success',
							success() {
								uni.setStorage({
									key: "USER_ID",
									data: res.info.user_id,
									success() {
										uni.navigateTo({
											url: "./settlement"
										})
									}
								})
							}
						});
					}else{
						uni.showToast({
							title: res.msg || '服务端失败',
							icon: 'none'
						});
					}
				})
				
			},
			// 获取短信验证码功能
			getPhoneCode() {
				let _that = this
				let phoneIstrue = validate.validatePhoneNumber(_that.phoneNumber)
				
				if (!phoneIstrue) {
					return false
				}
				let params = {
					mobile_phone: _that.phoneNumber,
					sms_type: '3'
				}
				interceptor.get('/supplier_applet_api.php?act=sms_send',params).then((res) => {
					if(res.status == 1){
						uni.showToast({
							title: res.msg,
							icon: 'success',
							success() {
								// 进入60S 倒计时
								_that.timeDown(_that.seconds)
								_that.codeTitle = '获取验证码'
								uni.setStorage({
									key: "USER_Mobile_Number",
									data: _that.phoneNumber
								})
							}
						});						
						
					}else {
						uni.showToast({
							title: res.msg || '服务端失败',
							icon: 'none'
						});
					}
				})
				
			},
			timeDown(num) {
				let _that = this
				// 计时器清零 按钮可以点击，还原计时数， 清空计数器
				if (num === 0) {
					_that.verifyShow = false
					_that.seconds = 60
					return clearTimeout()
				} else {
					_that.verifyShow = true
					setTimeout(() => {
						_that.seconds = num - 1
						_that.timeDown(num - 1)
					}, 1000)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.register-box {
		background: #fff;
		position: relative;
		.welcome {
			width: 100%;
			height: 800rpx;
			background: linear-gradient(0deg, #fff, #F4E3E2);
			padding: 50rpx 60rpx 0 60rpx;
			box-sizing: border-box;
			position: absolut
		}
		.register-form{
			width: 100%;
			position: absolute;
			top: 350rpx;
			padding: 0 45rpx;
			box-sizing: border-box;
			.form-box{
				background: rgba(255,255,255,.6);
				border-radius: 16rpx 16rpx 0 0;
				padding: 40rpx 30rpx 0 30rpx;
				box-sizing: border-box;
				::v-deep .uni-input{
					height: 55rpx;
					border-radius: 10rpx;
					border: 1px solid #DCDCDC;
				}
			}
		}
		
		.getPhoneCode {
			position: absolute;
			right: 20upx;
			bottom: 18upx;
			border: 0 !important;
			font-size: 28upx;
			border-radius: 10upx;
			background: #eee !important;
			min-width: 200upx;
			z-index: 9;
		}
	}
</style>